/**
 * SPDX-FileCopyrightText: 2023-2025 Sangfor Technologies Inc.
 * SPDX-License-Identifier: Mulan PSL v2
 */
<template>
    <div class="field_detail__container">
        <div class="specail-top__wrap common-top__wrap">
            <div class="detail-top__field">
                {{ fieldObj.title }}
            </div>
            <div class="detail-top__content">
                <lang>{{ fieldObj.firstName }}：</lang>
                <span class="font-important">{{ fieldObj.firstNum }}</span>
                <span class="line">|</span>
                <lang>{{ fieldObj.firstNamePercent }}：</lang>
                <span class="font-important">{{ fieldObj.firstNumPercent }}</span>
            </div>
        </div>
        <div v-if="showBar"
             class="charts">
            <sf-e-charts ref="barChart"
                         :options="barOptions"
                         :auto-destroy="true"
                         :auto-refresh="true"
                         :default-width="660"
                         :default-height="300" />
        </div>
        <div v-else
             class="charts">
            <sf-e-charts ref="pieChart"
                         :options="pieOptions"
                         :auto-destroy="true"
                         :auto-refresh="true"
                         :default-width="660"
                         :default-height="300" />
        </div>            
    </div>
</template>
<script lang=ts>
import { Vue, Component, Prop  } from 'vue-property-decorator';

@Component({
    name: 'FieldDetailContainer'
})
export default class FieldDetailContent extends Vue {
    @Prop({
        type:Object,
        default:()=>{}

        // TODO: REMOVE ANY
    }) fieldObj!: SafeAny

    @Prop({
        type:Boolean,
        default:true
    }) showBar!: boolean

    @Prop({
        type:Array,
        default:()=>['#204ED9', '#D2E1FF']
    }) pieColorList!: string[]

    @Prop({
        type:Array,
        default:()=>['#3366FF']
    }) barColorList!: string[]

    get pieOptions () {
        return {
            tooltip: {
                backgroundColor:'#fff',
                padding:10,
                borderWidth:1,
                borderColor:'#ddd',
                textStyle:{
                    color:'#5C5C5C'
                },
                trigger: 'item',
                formatter: '{b}: {c} ({d}%)'
            },
            color:this.pieColorList,
            series: [
                {
                    name: this.fieldObj.title,
                    type: 'pie',
                    radius: ['45%', '60%'],
                    data: [
                        {value: this.fieldObj.firstNum, name:this.fieldObj.firstName},
                        {value: this.fieldObj.secondNum, name:this.fieldObj.secondName}
                    ],
                    label: {
                        show: false
                    }
                    
                }
            ]
        };
    }
    get barOptions () {
        /*eslint-disable*/
        return {
            tooltip: {
                backgroundColor:'#fff',
                padding:10,
                borderWidth:1,
                borderColor:'#ddd',
                textStyle:{
                    color:'#5C5C5C'
                },
                trigger: 'item',
                // TODO: REMOVE ANY
                formatter: (params: SafeAny)=>{
                    return `${params.name}：${params.data}`
                }
            },
            grid: {
                left: '0',
                right: '0',
                bottom: '14%',
                top: '10%',
                containLabel: true
            },
            color:this.barColorList,
            xAxis: [
                {
                    type: 'category',
                
                    data: [this.fieldObj.firstName,this.fieldObj.secondName],
                    axisTick:{
                        show:false
                    },
                    axisLine:{
                        lineStyle:{
                            color:'#eee'
                        }
                    },
                    axisLabel:{
                        color:'#14161A'
                    },
                    splitLine:{
                        lineStyle:{
                            color:['#eee']
                        }
                    }
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    axisLine:{
                        show:false
                    },
                    axisTick:{
                        show:false
                    }
                }
            ],
            series: [
                {
                    type: 'bar',
                    data: [this.fieldObj.firstNum,this.fieldObj.secondNum],
                    barWidth:20
                }
            ]
        };
    }
};
</script>
<style lang="less">
   .field_detail__container{
        .specail-top__wrap{
            position: relative;
            &:before{
                content: '';
                background: #204ED9;
                width: 4px;
                height: 4px;
                transform: rotate(45deg);
                position: absolute;
                left: -10px;
                top: 8px;
            }
        }
        .charts{
            width: 100%;
            .sfv-echarts{
                width: 100%;
            }
        }
        
   }

</style>
    